<template>
  <div>
   <el-dialog
  title="货道设置"
  :visible.sync="huoDaoisshow"
  :before-close="close"
  width="65%"
  center>
  <div class="box1"><span>货道行数:6</span><span>货道列数:10</span><span>货道容量(个):10</span>
    <el-button type="primary" @click="znph">智能排货</el-button>
  </div> 
  

     <!-- <div class="box2">
      <div class="boxsp">
        
        <el-radio-button :label="index" v-for="(item,index) in hdlist" :key="index">
                <div class="sp" ref="sp"><img :src="item.skuImage" alt="">
                <div class="spname">{{item.brandName}}</div>
                </div>
        </el-radio-button>
       
      </div>

    </div> -->
    <div class="box2" >
          <div class="boxsp" v-for="(item,index) in hdlist" :key="index">
            <!-- <div>{{index+1}}</div> -->
            <div class="sp"><img :src="item.skuImage" alt="" ref="img">
            <div class="spname">{{item.brandName}}</div>
            </div>
             <div>
              
            <el-button type="text" class="tianjia" @click="add(item.skuId,item.skuImage)">添加</el-button>
           <el-button type="text" class="shanchu" @click="del(item.skuId,item.skuImage)">删除</el-button>
           </div>
          </div>
    
    </div>

  <span slot="footer" class="dialog-footer">
    <el-button @click='close'>取 消</el-button>
    <el-button type="primary" @click='submit'>确 定</el-button>
  </span>
</el-dialog>
            <znph :znphisshow.sync='znphisshow' :hdlist.sync='hdlist1'></znph>

            <xzsp :xzspisshow.sync='xzspisshow' :hdlist1.sync='hdlist1' :tianJialist1.sync='tianJialist1'></xzsp>
  </div>
</template>

<script>
import {spssApi,delSPLXapi} from '@/api/deviceManagement'
import znph from './zhi-neng-pai-huo.vue'
import xzsp from './xuan-ze-shang-pin.vue'
// import Vue from 'vue'

export default {
  name: 'HrsaasDetail',
 components:{
     znph,
     xzsp
  },

   props:{
    huoDaoisshow:{
      type:Boolean,
      default:true
    },
    // // 智能排货
    // znphisshow:{
    //    type:Boolean,
    //   default:true
    // }
  },

  data() {
    return {
      skuId:null,
      hdlist:[],
      hdlist1:[],
      znphisshow:false,
      xzspisshow:false,
       tabPosition: 'left',
       tianJialist1:{},
    };
  },

  mounted() {
         
  },
  
   created(){
     this.spssAp()
   },

 watch:{
    xzspisshow(val){
      if(!val){
          this.hdlist.forEach(item =>{
             if(item.skuId === this.skuId){
                if(JSON.stringify(this.tianJialist1) !== {}) { 
                console.log(22222);
                item.skuImage = this.tianJialist1.skuImage
                }
                
                // Vue.set(item,item.skuImage,this.tianJialist1.skuImage)
             }
              // this.xzspisshow = true 
            //  else{
            //   item.skuImage = this.tianJialist1.skuImage
            //  }
            //  return
           })
      }
    }
  }, 

  methods: {
   close(){
      this.$emit('update:huoDaoisshow',false)
    //   this.$refs.form.resetFields()
    //   this.form={}
      // console.log(this.form,'为什么清空不生效,生效啦');
    },

    // 点击提交
    async submit(){
    //   await this.$refs.form.validate()
    //   const res=await creatorder(this.form)
    //   // console.log(res,'新增成功了吗');
    //   this.$message.success('新增成功')
    //   this.close()
      this.$emit('update:huoDaoisshow',false)
    //   this.$refs.form.reserFileds()
    //   this.form={}
    //   this.$parents.getList()
    },


         //  spssApi  商品搜索   渲染货道
     async spssAp(){
       const res =  await spssApi(this.params)
      //  console.log(res);    //currentPageRecords
       this.hdlist = res.currentPageRecords
       this.hdlist1 = this.hdlist.map(ele=>{
        return {...ele}
       })
      console.log(this.hdlist);

     },
      // 添加商品
     add(skuId,skuImage){
      this.xzspisshow = true 
          // alert(1)
          this.skuId=skuId
            console.log(skuId);
             
     },

       add1(){
            
       },
     
      //  删除商品
     del(skuId,skuImage){
        //  alert(skuId)
           console.log(skuImage);
           console.log(this.hdlist);
           this.hdlist.map(item =>{
             if(item.skuId === skuId){
                item.skuImage = ''
             }
             return
           })
            

            //  this.$confirm('确认删除吗' ,'提示' , {
            //   type:'warning'
            //  }).then(async res => {
            //  await delSPLXapi(skuId)
            //  }).then(res =>{
            //   this.$message.success("删除成功")
            //   // 刷新列表 $emit/$on
            //   // this.$emit('refreshList')
            //  })
              
     },
    // 智能排货
     znph(){
      //  alert(1)
      this.znphisshow = true 
      //  this.$emit('update:znphisshow',true)
     }

    },
};
</script>

<style lang="scss" scoped>
  .info{
    display: flex;
    margin-top: 30px;
    .left{
      margin-left: 30px;
      .l{
    padding-top: 15px;
      }
    }
    .right{
      margin-left: 280px;
      padding: 15px;
      .r{
    padding-top: 15px;
    .el-link{
      color:#4368e1
    }
      }
    }

  }


  .box1{
        background-color: #f3f6fb;
        span{
            margin: 0 100px 10px 20px ;
            font-size: 15px;
        }
    }

    .box2{
        display: flex;
        flex-wrap: wrap;
        height: 400px;
        overflow: auto;

        .boxsp{
            width: 17%;
            height: 183px;
            // background-color: pink;
        
            margin: 10px ;
            
             .sp{
              
              width: 100% ;
              height: 130px;
              background-color: #fff;
              
              img{
                 width: 100%;
                 height: 100%;
              }

              .spname{
                  margin-left: 40px;
              
              }
              
             }
              //  添加商品
              .tianjia{
                 color: blue;
                 margin-left: 30px;
                 margin-top: 13px;
              }
              // 删除商品
              .shanchu{
                color: red;
              }
          
        }
    }

     .isshow {
       visibility: hidden; 
     }
</style>